<template>
  <apply-layout :current="4">
    <mt-button slot="right" @click="back">上一步</mt-button>
    <div class="form">
      <yd-cell-group>
        <yd-cell-item>
          <span slot="left" class="label required">原存档单位</span>
          <xf-input
            slot="right"
            :valid="[{required: true, msg: '请填写原存档单位'}]"
            v-model="form.originalArchiveUnit"
            ref="originalArchiveUnit"
            placeholder="请填写原存档单位"></xf-input>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label required">档案所在地</span>
          <yd-radio-group color="#2e71c9" v-model="form.archiveAddress" slot="right" class="radio">
            <yd-radio :val="1" class="radio-item">公共管理和人才服务机构</yd-radio>
            <yd-radio :val="0" class="radio-item">原单位</yd-radio>
          </yd-radio-group>
        </yd-cell-item>
      </yd-cell-group>
      <transition name="slide" mode="out-in">
        <yd-cell-group v-if="form.archiveAddress === 1" key="radio1">
          <yd-cell-item>
            <span slot="left" class="label required">身份证材料</span>
            <div class="img-right" slot="right">
              <div class="img-box">
                <upload-image
                  type="21"
                  file-name="身份证正面"
                  required="请选择身份证正面图片"
                  ref="file1"
                  v-model="form.file1"></upload-image>
                <span>正面</span>
              </div>
              <div class="img-box">
                <upload-image
                  type="21"
                  file-name="身份证反面"
                  ref="file2"
                  required="请选择身份证反面图片"
                  v-model="form.file2"></upload-image>
                <span>反面</span>
              </div>
            </div>
          </yd-cell-item>
          <yd-cell-item>
            <span slot="left" class="label required">郑州劳动单位合同</span>
            <div class="img-right" slot="right">
              <div class="img-box">
                <upload-image
                  type="21"
                  file-name="郑州劳动单位合同图片"
                  ref="file3"
                  required="请选择单位劳动合同图片"
                  v-model="form.file3"></upload-image>
                <span>郑州劳动单位合同图片</span>
              </div>
            </div>
          </yd-cell-item>
        </yd-cell-group>
        <yd-cell-group v-if="form.archiveAddress === 0" key="radio2">
          <yd-cell-item>
            <span slot="left" class="label required">郑州劳动单位合同</span>
            <div class="img-right" slot="right">
              <div class="img-box">
                <upload-image
                  type="21"
                  file-name="郑州劳动单位合同图片"
                  required="请选择单位劳动合同图片"
                  ref="file3"
                  v-model="form.file3"></upload-image>
                <span>郑州劳动单位合同图片</span>
              </div>
            </div>
          </yd-cell-item>
          <yd-cell-item>
            <span slot="left" class="label required">原单位辞职或解除合同证明</span>
            <div class="img-right" slot="right">
              <div class="img-box">
                <upload-image
                  type="21"
                  file-name="原单位辞职或解除合同证明"
                  required="请选择原单位辞职或解除合同证明"
                  ref="file4"
                  v-model="form.file4"></upload-image>
                <span>原单位辞职或解除合同证明</span>
              </div>
            </div>
          </yd-cell-item>
        </yd-cell-group>
      </transition>
      <div class="next">
        <mt-button size="large" type="primary" @click="onSubmit">提交</mt-button>
      </div>
    </div>
  </apply-layout>
</template>
<script>
  import ApplyLayout from './layout.vue'
  import XfInput from '../../../components/xf-input/xf-input.vue'
  import UploadImage from '../../../components/upload-image/upload-image'
  import {arrToForm, validate} from '../../../common/js/util'
  import {mapGetters} from 'vuex'

  export default {
    components: {
      UploadImage,
      XfInput,
      ApplyLayout},
    data() {
      return {
        form: {
          name: '', // 姓名
          cardId: '', // 身份证号
          personId: this.$route.query.id,
          originalArchiveUnit: '', // 原存档单位
          archiveAddress: 1, // 档案所在地(0:原单位 1:人才服务机构)
          file1: '', // 身份证正面
          file2: '', // 身份证反面
          file3: '', // 郑州单位劳动合同图片
          file4: '' // 原单位辞职或解除合同证明
        },
        canLeave: false
      }
    },
    computed: {
      ...mapGetters([
        'userInfo'
      ])
    },
    methods: {
      back() {
        this.canLeave = true
        this.$router.replace({
          name: 'apply3',
          query: this.$route.query
        })
      },
      onSubmit() {
        validate.call(this, this.form).then(() => {
          let files
          if (this.form.archiveAddress === 0) {
            files = [this.form.file1, this.form.file2, this.form.file3]
          } else {
            files = [this.form.file3, this.form.file4]
          }
          const form = {
            name: this.userInfo.name,
            cardId: this.userInfo.idCard,
            personId: this.$route.query.id,
            originalArchiveUnit: this.form.originalArchiveUnit,
            archiveAddress: this.form.archiveAddress,
            ...arrToForm(files, 'attachmentList')
          }
          this.$post('/admin/person/sapi/personal/records/perEntry/update/archive/letter/info', form, loading => { this.$message.loading(loading) }).then(res => {
            this.canLeave = true
            this.$router.replace({
              name: 'applySuccess'
            })
          })
        })
      }
    },
    beforeRouteLeave(to, fro, next) {
      if (this.canLeave) {
        next(true)
      } else {
        this.$message.confirm('您的业务办理尚未完成，确定离开？').then(() => {
          next(true)
        }).catch(() => {
          next(false)
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import "../../../common/style/variable";
  .radio{
    padding: .2rem 0;
    text-align: left;
    .radio-item{
      padding: .1rem 0;
      width: 100%;
    }
  }
  .img-right{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding: .1rem 0;
    .img-box{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 50%;
      padding: 0 .2rem;
      text-align: center;
      span{
        display: inline-block;
        padding: .2rem 0;
      }
    }
    img{
      width: 2rem;
    }
  }
  .file{
    width: 0;
    height: 0;
    visibility: hidden;
  }
</style>
